<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<div class="row sortable">
   
    <div class="col-xs-3" style="text-align:center;cursor:move;">
      <div class="img-container" style="border:1px solid #ccc;">
       <img src="1.jpg" class="img-thumbnail">
      </div>
      <div class="title" style="text-align:center;line-height:20px;">
      1
      </div>
    </div>
    
    <div class="col-xs-3" style="text-align:center;cursor:move;">
      <div class="img-container" style="border:1px solid #ccc;">
       <img src="2.jpg" class="img-thumbnail">
      </div>
      <div class="title" style="text-align:center;line-height:20px;">
      2
      </div>
    </div>

    <div class="col-xs-3" style="text-align:center;cursor:move;">
      <div class="img-container" style="border:1px solid #ccc;">
       <img src="3.jpg" class="img-thumbnail">
      </div>
      <div class="title" style="text-align:center;line-height:20px;">
      3
      </div>
    </div>

    <div class="col-xs-3" style="text-align:center;cursor:move;">
      <div class="img-container" style="border:1px solid #ccc;">
       <img src="4.jpg" class="img-thumbnail">
      </div>
      <div class="title" style="text-align:center;line-height:20px;">
      4
      </div>
    </div>

  </div>
  <script type="text/javascript">
  $(function(){
  $('.sortable').sortable({ 
    axis: "x", 
    update: function( event, ui ) {
      var s = '';
      $('.sortable div.title').each(function(){
        if (s !== '')
          s += ',';
        s += $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
      });
      /*$.get('__URL__/ajaxXSX', {'xsx':s}, function(data){
         if (typeof(data.code) != 'undefined') {
        if (data.code != 0) {
            alert(data.message);
        }
      }
      }, 'json');*/
    }
  });
});
</script>